<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>督察实战综合平台系统</title>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="css/lib/bootstrap.min.css">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
    <link rel="stylesheet" href="css/lib/AdminLTE.min.css">
    <link rel="stylesheet" href="css/lib/all-skins.min.css">
	  <link rel="stylesheet" href="css/lib/elementIndex.css">
    <link rel="stylesheet" href="css/index/index.css">
  </head>
  <body class="skin-blue sidebar-mini" style="height: auto;">
  	<div id="app">
    <header class="main-header">

        <!-- Header Navbar: style can be found in header.less -->
        <nav class="navbar navbar-static-top" role="navigation" style="margin-left:0px;">
           <a href="javascript:void(0);" class="logos"><span class="logo-lg"><b>督察实战综合平台系统</b></span></a>
            <div style="float:left;color:#fff;padding:15px 10px;">欢迎 张三</div>
            <div class="navbar-custom-menu">
                <ul class="nav navbar-nav">
                   <li><a href="javascript:;" onclick="openSysMsg()">
                    <i class="fa fa-envelope-o"></i>&nbsp;
                    <span class="badge" id="topSystemMsgNum">0</span></a></li>
                    <li><a href="javascript:;"><i class="fa fa-mars-stroke-h"></i> &nbsp;修改密码</a></li>
                    <li><a href="logout"><i class="fa fa-power-off"></i> &nbsp;退出系统</a></li>
                </ul>
            </div>
        </nav>
    </header>
<el-menu id="elMenu" default-active="1-4-1" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose" :collapse="isCollapse">
  <el-menu-item index="1" class="limenuIcon" @click="toggleMenu" v-model="isCollapse">
    <i class="menuIcon"></i>
    <span slot="title">菜单栏</span>
  </el-menu-item>
  <el-menu-item index="2" class="lihomeIcon">
    <i class="homeIcon"></i>
    <span slot="title">主页</span>
  </el-menu-item>
  <el-submenu index="3">
    <template slot="title">
      <i></i>
      <span slot="title">导航一</span>
    </template>
    <el-menu-item-group>
      <span slot="title">分组一</span>
      <el-menu-item index="3-1">选项1</el-menu-item>
      <el-menu-item index="3-2">选项2</el-menu-item>
    </el-menu-item-group>
    <el-menu-item-group title="分组2">
      <el-menu-item index="3-3">选项3</el-menu-item>
    </el-menu-item-group>
    <el-submenu index="3-4">
      <span slot="title">选项4</span>
      <el-menu-item index="3-4-1">选项1</el-menu-item>
    </el-submenu>
  </el-submenu>
  <el-menu-item index="4" disabled>
    <i class="el-icon-document"></i>
    <span slot="title">导航三</span>
  </el-menu-item>
  <el-menu-item index="5">
    <i class="el-icon-setting"></i>
    <span slot="title">导航四</span>
  </el-menu-item>
</el-menu>
    <div class="content-wrapper">
        <!-- Content Header (Page header) -->
        <section class="content-header">
            <ol class="breadcrumb" id="nav_title" style="position:static;float:none;">
                <li class="active"><i class="fa fa-home"
                                      style="font-size:20px;position:relative;top:2px;left:-3px;"></i> &nbsp; 首页
                </li>
                <li class="active">部门管理</li>
            </ol>
        </section>

        <!-- Main content -->
        <section class="content" style="background:#FAFBFD;">
            <iframe scrolling="yes" frameborder="0"
                    style="background:#FAFBFD;width:100%;min-height:200px;overflow:visible;" src="homepage.html"></iframe>
        </section>
        <!-- /.content -->
    </div>
</div>
  </body>
</html>
  <script src="js/lib/jquery.min.js"></script>
  <script src="js/lib/vue.min.js"></script>
	<!-- 引入组件库 -->
	<script src="js/lib/elementIndex.js"></script>
<script>
  var vm = new Vue({
            el: '#app',
            data:{isCollapse: false},
            methods: {
            handleOpen(key, keyPath) {
              // console.log(key, keyPath);
            },
            handleClose(key, keyPath) {
              // console.log(key, keyPath);
            },
            toggleMenu:function(){
              if(this.isCollapse){
                this.isCollapse = false;
              }else{
                this.isCollapse=true;
              }
            }
          }
        });
</script>